<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>

</table>

<script>
  let p1 = {};
  p1.name="张三";
  p1.age=18;
  p1.run=function (){
    console.log(this.name+","+this.age);
  }
  p1.run();

  let p2={
    name:"老刘",
    age:38,
    f2:function (){
      console.log(this.name+"在打飞机,"+this.age+"已日渐沧桑");
    }
  }
  p2.f2();
   //用对象封装一个商品的信息
  let product={title:"斯伯丁篮球",price:108,color:"红色"};
  /*用数组装多个对象，这样的数组里面就有多个商品的信息了*/
  let arr=[{title:"斯伯丁篮球",price:108,color:"红色"},
    {title:"威尔逊篮球",price:158,color:"花色"},
    {title:"李宁篮球",price:98,color:"蓝色"}];

  let t=document.querySelector("table");
  for(let p of arr){
      let tr=document.createElement("tr");
      let titletd=document.createElement("td");
      let pricetd=document.createElement("td");
      let colortd=document.createElement("td");
      titletd.innerText=p.title;
      pricetd.innerText=p.price;
      colortd.innerText=p.color;
      tr.append(titletd,pricetd,colortd);
      t.append(tr);
  }



</script>
</body>
</html>